<script setup lang="ts">
import { ref, watch, nextTick } from "vue"
import { useRouter } from 'vue-router'
import { getAuthRole, updateAuthRole } from '@/common/apis/system/user'
const router = useRouter()
interface Props {
  visible: boolean,
  id: string
}
const tableData = ref([])
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  id: {
    type: String,
    default: ""
  },
})

const userInfo = ref<any>({})
const emit = defineEmits(["closeDialog"])
// 弹窗
const dialogVisible = ref<boolean>(false)
// 加载中
const loading = ref<boolean>(false)
// 选中的数据
const multipleSelection = ref([])
// 表格引用
const tableRef = ref()
const isLoading = ref(false)
// 关闭弹窗
const closeDialog = () => {
  loading.value = false
  multipleSelection.value = []
  emit("closeDialog", undefined)
}
// 获取行键
const getRowKeys = (row: any) => {
  return row.roleId
}
// 选择数据
const handleSelectionChange = (selection: any) => {
  multipleSelection.value = selection
}
// 保存
const handleConfirm = () => {
  const data = {
    userId: props.id,
    roleIds: multipleSelection.value.map((item: any) => item.roleId).join(',')
  }
  isLoading.value = true
  updateAuthRole(data).then((res: any) => {
    isLoading.value = false
    closeDialog()
  }).catch(() => {
    isLoading.value = false
  })
}

// 设置表格选中行
const setTableSelection = () => {
  if (!tableRef.value) return

  // 清除现有选择
  tableRef.value.clearSelection()

  // 为每个应该选中的行设置选中状态
  tableData.value.forEach((row: any) => {
    if (row.flag) {
      tableRef.value.toggleRowSelection(row, true)
    }
  })
}

// 监听弹窗
watch(
  () => [props.visible],
  () => {
    dialogVisible.value = props.visible
    if (props.visible) {
      loading.value = true
      multipleSelection.value = [] // 清空之前的选择

      getAuthRole(props.id).then((res: any) => {
        userInfo.value = res.user

        // 处理角色数据
        tableData.value = res.roles.map((item: any) => {
          return {
            ...item,
            status: item.status === '0' ? '正常' : '停用'
          }
        })

        loading.value = false

        // 等待表格渲染完成后设置选中状态
        nextTick(() => {
          setTableSelection()
        })
      }).catch(() => {
        loading.value = false
      })
    }
  }
)
</script>
<template>
  <el-drawer v-model="dialogVisible" :show-close="false" direction="rtl" size="700px" @close-auto-focus="closeDialog"
    @close="closeDialog">
    <template #header>
      <h4>分配角色</h4>
      <el-space justify="end">
        <el-button type="primary" :loading="isLoading" v-throttle="() => handleConfirm()">
          保存
        </el-button>
      </el-space>
    </template>
    <template #default>
      <div class="form-content">
        <el-row class="drawer-content" :gutter="10">
          <el-col :span="3">登录名称 </el-col>
          <el-col :span="9"> {{ userInfo.nickName }} </el-col>
          <!-- <el-col :span="3"> 所属部门 </el-col>
          <el-col :span="9"> {{ userInfo.dept?.deptName }} </el-col> -->
        </el-row>
      </div>
      <div class="edit-drawer-tabel">
        <el-table
          ref="tableRef"
          :data="tableData"
          style="width: 100%"
          v-loading="loading"
          default-expand-all
          :row-key="getRowKeys"
          show-overflow-tooltip
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" header-align="left" :reserve-selection="true" width="50" />
          <el-table-column prop="roleName" width="150px" label="角色名称" />
          <el-table-column prop="roleKey" width="170px" label="权限字符" />
          <el-table-column prop="status" width="100px" label="角色状态" />
          <el-table-column prop="createTime" width="150px" label="创建时间" />
        </el-table>
      </div>
    </template>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">退 出</el-button>
      </div>
    </template>
  </el-drawer>
</template>
<style lang="scss" scoped>
.upload-demo {
  width: 100% !important;
}

.edit-drawer-tabel {
  :deep(.el-table) {
    height: calc(100vh - 347px);
  }
}

:deep(.el-upload.el-upload--text) {
  width: 100% !important;
}

.form-content {

  :deep(.el-checkbox-group) {
    width: 100%;
  }
}
</style>
